<template>
    <div>
      <el-dialog
        title="订单详情"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form label-position="left" label-width="100px" class="demo-ruleForm">
          <!--店名，自动生成，不可更改-->
          <el-form-item label="店名">
            <el-input :disabled="true" v-model="restaurant.restaurantName" value=""></el-input>
          </el-form-item>

          <div v-for="food in foodList" v-if="food.count>0" class="text item">
            <el-row>
              <el-col :span="20">
                <span style="float: left;">{{food.title}}:{{food.count}} 份</span>
              </el-col>
              <el-col :span="4">
                <!--价格:单价乘数量-->
                <span class="price">{{food.price*food.count}}</span><br/>
              </el-col>
            </el-row>
          </div>
          <span>包装费用：{{restaurant.boxCost}}</span>

          <!--收货地址选择-->
          <el-form-item label="收货地址">
            <el-select size="large" v-model="defaultAddress.id" :placeholder="defaultAddress.address">
              <div v-for="address in addressData">
                <el-option :label="address.address" :value="address.id"></el-option>
              </div>
            </el-select>
          </el-form-item>

          <!--订单备注-->
          <el-form-item label="订单备注">
            <el-input type="textarea" v-model="order.note"></el-input>
          </el-form-item>
          <el-form-item>
            <span class="price total">总价: {{totalPrice}}¥</span>
            <el-button type="primary" @click="submitForm">立即创建</el-button>
            <el-button @click="resetForm">取消</el-button>
          </el-form-item>
        </el-form>

      </el-dialog>
    </div>
</template>

<script>
    export default {
      name: "OrderFormDialog",
      props: {
        dialogVisible: {
          type: Boolean,
          default: false
        }, //表单可见性
        restaurant: Object,     //商家对象
        foodList: Array,        //订单列表
        //食品编号,查询评论
      },
      data() {
        return {
          orderId: Number,
          addressData: [],
          defaultAddress: {
            id: null,
            address: "",
            name: ""
          },
          order: {
            address: null,        //收货地址
            note: "",           //订单备注
            status: Number,         //订单状态
          }
        };
      },
      // 收货地址列表
      created() {
        this.$axios.get("/user/address", {
          params: {
            id: this.$store.state.user.id
          }
        })
          .then(response => {
            if (response.data.success) {
              this.addressData=response.data.address_list;
            }
            console.log("get address list success");
            // 找到默认地址
            this.addressData.forEach((temp, index) => {
              if (temp.isDefault) {
                // console.log(temp);
                this.defaultAddress.id=temp.id;
                this.defaultAddress.address=temp.address;
                this.defaultAddress.name=temp.name;
              }
            });
          })
          .catch(error => {
            console.log(error);
          });
         
      },
      computed: {
        //  返回购物清单总价格
        totalPrice: function () {
          let total_price=0;
          //遍历foodList
          if (this.foodList.length>0) {
            for(var i=0; i<this.foodList.length; i++){
              total_price = total_price+(this.foodList[i].price*this.foodList[i].count);
            }
          }
          total_price += this.restaurant.boxCost;
          return total_price;
        },
      },
      methods: {
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              this.$emit("close-order");
              // done();
            })
            .catch(_ => {});
        },
        //提交订单信息给后台
        submitForm() {
          const h = this.$createElement;
          // console.log(this.order);
          if (this.$store.state.user.wallet < this.totalPrice) {
            this.$notify({
              title: '订单',
              type: 'error',
              message: '余额不足,请前往个人信息页面充值...'
            });
          } else {
            this.$axios({
              method: "post",
              url: "/order/neworder",
              data: {
                uid: this.$store.getters.uid,
                rid: this.restaurant.id,
                addressId: this.defaultAddress.id,
                foodList: this.foodList,
                remark: this.order.note,
                boxCost: this.restaurant.boxCost,
                total: this.totalPrice,

              }
            })
              .then(response => {
                console.log(response.data.message);
                this.$notify({
                  title: '订单',
                  message: h('i', { style: 'color: teal'}, response.data.message)
                });
                this.$emit("close-order");
                this.$emit("reset-cart");
              })
              .catch(error => console.log(error))
          }

          // this.order={null,this.};
        },
        resetForm() {
          console.log('reset');
          this.order={};
          this.$emit("close-order");
        }
      }
    }
</script>

<style scoped>
  .price {
    color: #E6A23C;
    font-family: "Hiragino Sans GB";
  }
  .total {
    float: left;
    font-size: 20px;
  }

</style>
